<template>
    <div id="bannerbox">
        <!-- <c-banner /> -->
		<div class='banner'>
			<section class="top">
				<!-- <img src="./radar.png" class="radarimg" > -->
				<div class="radarimg">
					<div class="radar"></div>
				</div>
				
				<ul class="leftone txt">
					<li v-text="p1" class='rowo'></li>
					<li class="amount rowto" v-text='amount'></li>
					<li v-text="p2" class='rowth'></li>
				</ul>
				<ul class="lefttwo txt">
					<li v-text="p1" class='rowo'></li>
					<li class="amount rowto" v-text='amount'></li>
					<li v-text="p2" class='rowth'></li>
				</ul>
				<ul class="rightbottom txt">
					<li v-text="p1" class='rowo'></li>
					<li class="amount rowto" v-text='amount'></li>
					<li v-text="p2" class='rowth'></li>
				</ul>
			</section>
			<section class="bottom">
				<ol class="flex smallImg">
					<li>
						<img src="./tu1.png">
					</li>
					<li>
						<img src="./tu2.png">
					</li>
					<li>
						<img src="./tu3.png">
					</li>
					<li>
						<img src="./tu4.png">
					</li>
					<li>
						<img src="./tu5.png">
					</li>
				</ol>
			</section>
		</div>
		 <div class="areatu">
			<div class="postop">
				<h3>货币主力指数</h3>
				<p v-text="hbNum"></p>
				<span>-17.69</span>
				<span>-2.24% <i></i></span>
			</div>
			<ul class="hangq">
				<li v-for="(list,index) in measure" :key="index">
					<label>{{list.name}}</label>
					<span>{{list.value}}</span>
				</li>
			</ul>
			<label class="measureLabel">指数分时走势</label>
			
			
			<chart-line/>
		</div>
		<!-- <index-tab></index-tab> -->
        <!-- <c-notice /> -->
        <!-- <c-list /> -->
        <!-- <c-info /> -->
        <!-- <c-address /> -->
        <!-- <c-download/> -->
        <!-- <c-begin v-if="!signed" /> -->
    </div>
</template>

<script>
import Lang from './lang.js'
import lineChart from '../echart/chart-line'
export default {
	name: 'test',
	data() {
		return {
			p1: '本小时13:00-14:00参与挖矿手续折合BTC',
			p2: '7月28日10:00至7月31日24:00公测期间，每小时限额前333 BTC手续费参与挖矿。',
			amount: '3.23362594871564 BTC',
			hbNum: 736.1,
			measure: [
				{name: '最高', value: 799.23},
				{name: '最低', value: 762.97},
				{name: '上涨币种', value: '0个'},
				{name: '下跌币种', value: '10个'},
			],
			Lang,
			langSelects: [{value: 0, txt: '简体中文'}, {value: 1, txt: 'English'}],
		}
	},
	components:{
		'chart-line':lineChart
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	methods: {
		e_sign_(s) {
			this.$router.push('/' + s)
		},
	},
}
</script>

<style scoped>
#bannerbox {
	background: #04021f;
	overflow: hidden;
}
section.top {
	position: relative;
	top: 40px;
}
section.bottom {
	margin-top: 243px;
}
.banner {
	width: 1200px;
	margin: 70px auto 0;
	background: url(./bgGrid.png);
}
.radarimg {
	background-image: url(./radar.png);
	background-repeat:no-repeat;
	background-size:contain;
	position: relative;
	margin: 60px auto 0;
	display: block;
	width: 32vw;
	height: 20.5vw;
}
.txt {
	position: absolute;
	width: 360px;
}
.leftone {
	left: 0;
	top: 92px;
}
.amount {
	background: url(./gold.png) no-repeat;
	background-position: left center;
	width: 27px;
	height: 26px;
	line-height: 30px;
	text-indent: 30px;
}
.txt > .rowo {
	font-size: 12px;
	color: #a2a7be;
	width: 100%;
}
.txt > .rowth {
	font-size: 13px;
	color: #a2a7be;
}
.txt > .rowto {
	font-size: 28px;
	color: #f6be36;
	margin-top: 20px;
	margin-bottom: 26px;
	width: 100%;
}
.lefttwo {
	left: 0;
	bottom: -120px;
}
.rightbottom {
	right: -65px;
	bottom: -85px;
}
ol,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.smallImg {
	justify-content: space-between;
	align-items: center;
}
.areatu {
	width: 90%;
	height: 226px;
	margin: 68px auto 0;
	border: 1px solid #2c3a68;
	position: relative;
	overflow: hidden;
}
.postop {
	position: absolute;
	z-index: 999;
	left: 60px;
	top: 36px;
}
.postop > h3 {
	color: #6e7e99;
	font-size: 14px;
}
.postop > p {
	color: #959bb1;
	font-size: 30px;
	display: inline-block;
}
.postop > span {
	display: inline-block;
	font-size: 12px;
	color: #6a2c18;
	margin-left: 20px;
}
.areatu > .measureLabel {
	position: absolute;
	right: 30px;
	bottom: 17px;
	color: #484d64;
}
.areatu > .hangq {
	position: absolute;
	left: 60px;
	bottom: 20px;
}
.hangq > li {
	display: inline-block;
	width: 80px;
	text-align: center;
	font-size: 12px;
	color: #979db2;
	margin-right: 20px;
}

.radar {
  /*background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);*/
  /*background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);*/
  position: absolute;
  left: 54.5%;
  top: 41.4%;
  width: 13vw;
  height: 13vw;
  max-height: 75vh;
  max-width: 75vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /*border: 0.2rem solid #000;*/
  overflow: hidden;
}
.radar:before {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: blips 88s infinite;
  animation-timing-function: linear;
  animation-delay: 5s;
}
.radar:after {
  content: ' ';
  display: block;
  background-image: linear-gradient(44deg, rgba(32, 0, 0, 0) 50%, #1fb6eb 100%);
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: radar-beam 4s infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  border-radius: 100% 0 0 0;
}

@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
